import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// const originalPush = VueRouter.prototype.push
// // 重写了原型上的push方法，统一的处理了错误信息
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }




// 引入路由，安装路由，控制页面的跳转，然后给相应的组件设置懒加载，以免加载时过于庞大影响性能
// 然后在路由的相关配置下设置url与组件之间的映射关系

 const Login = ()=> import ('../component/content/login.vue')
 const Home = ()=> import ('../views/Home/home.vue')
 const Welcome = ()=> import('../views/Home/welcome.vue')
 const Users = ()=> import('../views/User/user.vue')
 const Rights = ()=>import('../views/Right/right.vue')
 const Roles = ()=>import('../views/Right/role.vue')
 const Category =() =>import('../views/Manage/caterory.vue')
 const Params =()=>import('../views/Manage/params.vue')

const routes = [
   { path:'' , redirect:'/login'},
   { path:'/login' , component:Login},
   { path:'/home'  ,
     redirect:'/welcome',
     component:Home ,
    // home的子路由，子路由的视图就要在home中显示，所以该路由的占位符就应该放在home的主体中
       children:[
         {path:'/welcome',component:Welcome},
         {path:'/users',component:Users},
         {path:'/rights',component:Rights},
         {path:'/roles',component:Roles},
         {path:'/categories',component:Category},
         {path:'/params',component:Params}
      ]}
]   

// 给路径设置成哈西模式

const router = new VueRouter({
  routes,
  mode:'history'
})

// 然后要设置一个全局的前置守卫，在路由跳转之前先判断一下，看它的路径要跳转到哪里
// 如果跳转到登录界面这直接进行下一步
// 如果不是则就获取当前的token，然后判断是否有token，如果有的话，则放行，没有的话，则返回登录界面
router.beforeEach((to,from,next)=>{
  if(to.path == '/login') return next()

  const tokenStr = window.sessionStorage.getItem('token')
  if(!tokenStr) return next('/login')
  next()
})


export default router
